<template>
    <el-row :gutter="20" class="marginTop20">
        <el-col :span="24" class="boxCol" style="height: 790px;overflow: auto;" v-infinite-scroll="loadMoreData">
            <div v-if="data.length > 0">
                <div :key="index" @click="toDetails('/service/infomation-details?id=' + item.creation_id)" class="box back151225 marginBottom20 colorFFF" v-for="(item, index) in data">
                    <div class="flexFS">
                        <el-avatar :src="item.author.avatar" alt slot="reference" srcset style="width: 40px; height: 40px" v-if="item.author"></el-avatar>
                        <div style="width: 150px; margin-left: 10px">
                            <div class="size14">{{ item.author.name }}</div>
                            <div class="color999 size12 flexFS">{{ item.created_at }}</div>
                        </div>
                    </div>
                    <div class="marginTop10 size14">{{ item.content }}</div>
                    <el-row :gutter="10">
                        <el-col :key="key" :span="6" class="mt-5" v-for="(value, key) in item.media_urls">
                            <el-image :preview-src-list="item.media_urls" :src="value" class="radius10" fit="cover" style="width: 100%; height: 220px"  @click.stop="">
                                <div slot="placeholder" class="image-slot" style="width: 100%; height: 220px;background-color: #272337;">
                                    <img src="@/assets/image/load-image.png" alt="" srcset="" style="width: 70px;margin-left: 38%;margin-top: 25%;">
                                </div>
                            </el-image>
                        </el-col>
                    </el-row>
                    <div class="flexFS marginTop10">
                        <div class="flexFS size12" style="width: 80px">
                            <img alt src="@/assets/icon/creation/views.png" srcset width="20px" />
                            <span>{{ item.viewed }}</span>
                        </div>
                        <div class="flexFS size12" style="width: 80px">
                            <img @click.stop="like(1,index)" alt src="@/assets/icon/creation/like_invalid.png" srcset v-show="!item.liked_count" width="20px" />
                            <img @click.stop="like(0,index)" alt src="@/assets/icon/creation/liked.png" srcset v-show="item.liked_count" width="20px" />
                            <span>{{ item.like_count  | formatNumber }}</span>
                        </div>

                        <div class="flexFS size12" style="width: 80px;position: relative;"  @click.stop="share_visibleFun(index)">
                            <img alt src="@/assets/icon/creation/share.png" srcset width="20px" />
                            <!-- <span>{{ item.forwards }}</span> -->
                            
                        <div class="position-absolute share-card" v-if="share_visible == index">
                            <div class="color-fff">分享视频</div>
                            <div class="font-18 color-fff flex align-center mt-10">
                                <div class="width-8b text-center">
                                    <i class="el-icon-arrow-left cursor-pointer"></i>
                                </div>
                                <div class="flex align-center width-84b scroll-friend" v-if="contacters.length > 0">
                                    <div :class="{ 'ml-4': index > 0 }" :key="index" v-for="(it, index) in contacters">
                                        <div @click.stop="shareToFriend(it.userProfile.userID,item)"
                                            class="width-60 text-center cursor-pointer">
                                            <div class="flex jus-center">
                                                <el-avatar :size="45" :src="it.userProfile.avatar"></el-avatar>
                                            </div>
                                            <div :title="it.userProfile.nick" class="font-13 text-line1">
                                                {{ it.userProfile.nick }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center flex-1 color-999" v-else>暂无好友，去找别人聊聊吧~</div>
                                <div class="width-8b text-center">
                                    <i class="el-icon-arrow-right cursor-pointer"></i>
                                </div>
                            </div>
                            <div @click.stop="copyLink"
                                class="mt-20 text-center pt-8 pb-8 color-fff width-90b cursor-pointer flex align-center jus-center"
                                style="margin-left:5%;border:1px solid #353047;">
                                <i class="el-icon-paperclip font-14"></i>
                                <span>复制链接</span>
                            </div>
                        </div>
                        </div>

                        <div @click.stop="deleteCreation(item.creation_id)" class="flexFS size12 hand" style="width: 80px" v-if="role == 'own'">
                            <img alt src="@/assets/manage/delete.png" srcset width="20px" />
                            <span>删除</span>
                        </div>

                        <div class="flexFS size12 hand" style="width: 80px" v-if="role == 'user'"  @click.stop="rewardFun(item.creation_id)">
                            <img alt src="@/assets/icon/creation/dasang.png" srcset width="20px" />
                            <span>打赏</span>
                        </div>

                        <div v-if="item.city || item.province" class="flexFS size12" style="width: 450px;">
                            <i class="el-icon-location-outline size18" ></i>
                            {{ item.city ? item.city : item.province }}
                        </div>
                        <!-- <div class="flexFS color999 size12" style="width: 100px;">
                          <img alt src="@/assets/icon/creation/pl.png" srcset width="20px" />
                          <span>{{ item.comment_count }}</span>
                        </div>-->
                    </div>
                </div>
                <div class="text-center font-15 color-999 mt-10" v-if="append_loading">加载中...</div>
                <div class="text-center font-15 color-999 mt-10" v-if="data.length >= total">~没有更多了~</div>
            </div>
            <div v-else>
                <el-empty :image="empty_image"></el-empty>
            </div>
            <payment :creation_id="creation_id" ref="payment"></payment>
        </el-col>
    </el-row>
</template>
<script>
import pageTool from '@/mixins/page'
import recommendVideo from '@/components/recommend-video/index'
import Cookies from 'js-cookie';
import payment from '@/components/payment/payment'
export default {
    mixins: [pageTool],
    components: {
        recommendVideo,
        payment
    },
    props: {
        user_id: {
            type: [Number, String],
        },
    },
    data() {
        return {
            query: {
                creation_type: 'infomation',
                size: 12,
            },
            empty_image: require('@/assets/image/empty.png'),
            role: 'user',
            creation_id:null,
            share_visible: -1,
        }
    },
    computed: {
        contacters() {
            return this.$store.state.system.contacters
        },
    },
    mounted() {
        if (this.user_id) {
            this.query.user_id = this.user_id
            this.beforeInit()
        }
        if (this.$route.query.role) {
            this.role = this.$route.query.role
        }
    },
    methods: {
        beforeInit() {
            this.url = '/creation/index'
            this.append = true
            this.init() //重新请求数据
        },
        share_visibleFun(index) {
            if (this.share_visible == -1) {
                this.share_visible = index
            } else if (this.share_visible == index) {
                this.share_visible = -1
            } else {
                this.share_visible = index
            }
        },
        shareToFriend(user_id,creation) {
            console.log('user_id,creation',user_id,creation)
            this.$store.state.system.message = {
                to: user_id,
                payload: {
                    data: JSON.stringify({
                        longItem: {},
                        postItem: {
                            creation_id: creation.creation_id,
                            media_urls:creation.media_urls,
                            content:creation.content,
                        },
                        shortItem: {
                        },
                        
                        type: 'post',
                    }),
                    description: '',
                    extension: '',
                },
            }
            this.share_visible = -1
            this.$message({
                    message: '已分享',
                    type: 'success',
                    customClass: 'super-message',
                })
            
        },
        isLogin() {
            // 返回true表示已经登录，false表示未登录
            let result = Cookies.get('user-info');
            if (result) {
                return true;
            } else {
                return false;
            }
        },
        rewardFun(id) {
            console.log('打赏')
            let res = this.isLogin()
            if(res){
                this.creation_id = id
                this.$refs.payment.feeShow = true
            }else{
                console.log('未登录')
                this.$store.dispatch('system/showLogin')
            }
        },
        toDetails(url) {
            this.$router.push({ path: url })
        },
        loadMoreData() {
            this.page++
            this.init()
        },
        like(type,index) {
            console.log('点赞',type,index)
            let param = {
                type: type,
                creation_id: this.data[index].creation_id,
            }
            this.$request
                .post('/creation/like/create', param)
                .then((res) => {
                    let resule = 0
                    if(type){
                     resule = this.data[index].like_count + 1
                        this.$set( this.data[index],'like_count',resule)
                    }else{
                       resule  =  this.data[index].like_count - 1
                       this.$set( this.data[index],'like_count',resule)
                    }
                    this.$set( this.data[index],'liked_count',type)
                })
                .catch(() => {})
        },
        deleteCreation(id) {
            this.$request.del('/creation/delete/' + id).then((res) => {
                try {
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        customClass: 'messageClass',
                    })
                    let arr = []
                    arr[0] = id
                    //删除选中的id
                    this.data = this.data.filter((item) => !arr.includes(item.creation_id))
                } catch (err) {
                    console.log('err', err)
                }
            })
        },
    },
}
</script>

  
<style lang="scss" scoped>
.boxCol::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}
.share-card {
    left: 0;
    top: 22px;
    z-index: 10000;
    padding: 20px;
    background: #272337;
    border-radius: 10px;
    border: 1px solid #353047;
    width: 300px;
}
</style>